<template>
  <div>
    <div>递归组件</div>
    <recursive-exam></recursive-exam>
    <div>动态组件,可以用keep-alive缓存</div>
    <button @click="handleChange('A')">显示A组件</button>
    <button @click="handleChange('B')">显示B组件</button>
    <button @click="handleChange('C')">显示C组件</button>

    <keep-alive>
        <component :is="component"></component>
    </keep-alive>
    
    <p>is绑定String</p>
    <i-button>普通按钮</i-button>
    <br/>
    <i-button to="https://juejin.im">链接按钮</i-button>
    <br/>
    <i-button to="https://juejin.im" target="_blank">新窗口打开链接</i-button>
  </div> 
</template>

<script>
import recursiveExam from "base/recursive/recursive-example";
import componentA from "base/recursive/a";
import componentB from "base/recursive/b";
import componentC from "base/recursive/c";
import iButton from 'base/recursive/button'
export default {
  data() {
    return {
      component: componentA
    };
  },
  methods: {
    handleChange(component) {
      if (component === "A") {
        this.component = componentA;
      } else if (component === "B") {
        this.component = componentB;
      } else {
        this.component = componentC;
      }
    }
  },
  components: {
    recursiveExam,
    iButton
  }
};
</script>

<style>
</style>
